<template>
<div class="homeContent">
  <div class="homeHeader">
    <el-button type="primary" @click="data.dialogVisible = true">
      <el-icon><Plus /></el-icon> 新增知识库</el-button>
  </div>

  <div class="bookBase">
    <div class="listItem" style="font-size: 20px;" v-for="(item, index) in bookBaseList" :key="index" @click="goAnswerBase(item)">
      <div class="edit" @click.stop="editBase(item)"><el-icon><Edit /></el-icon></div>
      <img class="itemImg" :src="item.imgUrl" alt="">
      <div class="itemTitle">{{item.title}}</div>
      <div class="itemIfo">
        <el-icon class="elIcon"><Files /></el-icon>{{item.total}}
      </div>
    </div>
  </div>


<!--  弹框-->
  <el-dialog v-model="data.dialogVisible"
             :title=" data.isEditBase ? '编辑知识库':'新增知识库'"
             style="max-width: 460px"
             :before-close="handleClose">
    <el-form ref="ruleFormRef" :rules="rules" :model="data.form" label-width="120px" style="max-width: 460px">
      <el-form-item label="知识库类型" prop="typeId">
        <el-select v-model="data.form.typeId" placeholder="请选择知识库类型">
          <el-option v-for="(item, index) in typeList" :key="index" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="知识库名称" prop="title">
        <el-input v-model="data.form.title" placeholder="请填写知识库名称" />
      </el-form-item>
      <el-form-item label="知识库题数" prop="total">
        <el-input v-model="data.form.total" placeholder="请填写题目数" />
      </el-form-item>
      <el-form-item label="封面图" prop="imgUrl">
        <el-upload
            class="avatar-uploader"
            action="https://www.doupaopao.club/api/uploadImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="data.form.imgUrl" :src="data.form.imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <div class="footerBut">
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </div>
    </el-form>
  </el-dialog>
</div>
</template>

<script setup>
import {reactive, ref, onMounted } from "vue";
import {ElMessage} from "element-plus";
import api from '../../src/api/index'
import { useRouter }  from  'vue-router'
import useCounter from "../stores/counter";

const pathNameStore = useCounter()
const router = useRouter()
let ruleFormRef = ref()
const rules = reactive({
  title: [
    { required: true, message: '请选择知识库类型', trigger: 'blur' },
  ],
  typeId: [
    { required: true, message: '请填写知识库名称', trigger: 'blur' },
  ],
  imgUrl: [
    { required: true, message: '请填上传知识库封面', trigger: 'blur' },
  ],
  total: [
    { required: true, message: '请填写题目数', trigger: 'blur' },
  ],
})
const typeList = reactive([
  {id: '1', title: '历史'},
  {id: '2', title: '地理'},
  {id: '3', title: '植物'},
  {id: '4', title: '动物'}
])

const data = reactive({
  isEditBase: false,
  dialogVisible: false,
  form: {
    typeId: '',
    title: '',
    imgUrl: '',
    total: ''
  }
})

let bookBaseList = ref([])

//  方法 事件
onMounted( () => {
   getBaseList()
  let env = import.meta.env
  console.log(env)
})

const getBaseList = () => {
  api.getBaseList().then(res => {
    bookBaseList.value = res.data.data
    data.dialogVisible = false
  })
}

// 编辑
const editBase = (item) => {
  data.isEditBase = true
  data.dialogVisible = true
  data.form = {
    ...item
  }
}

// 转到题库
const goAnswerBase = (item) => {
  //  保存路径名称
  pathNameStore.pathName = router.currentRoute.value.meta.title
  console.log(router.currentRoute.value.builtIn)
  router.push({path: `/answerBase`, query: {id: item.id }})
}

const handleClose = () => {
  data.dialogVisible = false
  data.isEditBase = false
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  if (data.form.imgUrl) {
    data.form = {
      typeId: '',
      title: '',
      imgUrl: '',
      total: ''
    }
  }
}
function handleAvatarSuccess(uploadFile) {
  data.form.imgUrl = uploadFile.data.img
}
function beforeAvatarUpload(uploadFile) {
  if (uploadFile.size > 1048576) {
    ElMessage({
      message: '文件过大'
    })
    return false
  }
}

const submitForm = (formEl) => {
  if (!formEl) return
   formEl.validate((valid, fields) => {
    if (valid) {
      if (data.isEditBase) {
        renewBase()
        return
      }
      api.getAddBase(data.form).then(() => {
        ElMessage({
          message: '新增成功'
        })
        data.dialogVisible = false
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const renewBase = () => {
  api.getRenewBase(data.form).then(() => {
    ElMessage({
      message: '更新成功'
    })
    getBaseList()
  })
}

</script>

<style scoped lang="scss">
.homeHeader{
  padding: 10px 20px 20px;
  border-bottom: 1px solid #eee;
}
.el-form-item{
  margin-bottom: 28px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}

.avatar-uploader:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.footerBut{
  display: flex;
  align-items: center;
  justify-content: center;
}

.bookBase{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 10px;
  font-size: 20px;
  .listItem{
    position: relative;
    padding: 10px;
    margin-right: 20px;
    color: #858585;
    box-shadow: 0px 0px 8px #ddd;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    .edit{
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(133,133,133,0.4);
      z-index: 1;
      border-bottom-left-radius: 10px;
      padding: 5px;
      color: #fff;
    }
    .itemImg{
      width: 140px;
      height: 140px;
    }
    .itemTitle{
      font-size: 18px;
      color: #2f2f2f;
    }
    .itemIfo{
      display: flex;
      align-items: center;
      line-height: 35px;
      font-size: 16px;
      color: #2F2F2FFF;
      .elIcon{
        position: relative;
        top: 2px;
      }
    }
  }
}
</style>